<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/waves.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
				/*background-color: red;*/
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
			
			#slider {
				/*height: 200px;*/
				/*margin-top: 200px;*/
			}
			
			#slider img {
				/*height: 200px;*/
			}
			
			.vidio-list {
				list-style: none;
				padding: 0;
				/*border: 1px solid red;*/
				
			}
			
			.vidio-list.await {
				padding-bottom: 50px;
			}
			
			.vidio-list li {
				/*border: 1px solid red;*/
				text-align: center;
				/*float: left;*/
				display: inline-block;
				width: 25%;
				height: 100%;
				padding: 10px;
				border-radius: 5px;
			}
			
			.vidio-list li a {
				border-radius: 5px;
			}
			
			.vidio-list li a img {
				width: 80%;
				height: 80%;
				/*text-align: center;*/
				/*display: block;*/
			}
			
			.vidio-list li a span {
				display: block;
				font-size: 12px;
				color: #000000;
			}
			
			.split {
				background: linear-gradient(to left, #efefef, #b6b6b6, #efefef);
				height: 1px;
				text-align: center;
			}
			
			.split span {
				position: absolute;
				transform: translateY(-50%) translateX(-50%);
				background: #efeff4;
				color: #b6b6b6;
				font-size: 12px;
				border: 5px solid #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">超级视频</h1>
		</header>
		<div id="app" class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521370008005&di=ffc854e26eae269b9e0662b065a14831&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F77%2F10%2F32m58PICHqI_1024.jpg" /></a>
					</div>
					<!--<div class="mui-slider-item">
						<a href="#"><img src="images/shuijiao.jpg" /></a>
					</div>-->
				</div>
			</div>

			<ul class="vidio-list">
				<li v-for="video in videos">
					<a class="waves-effect" @tap="open('html/video_home.html',video)">
						<img :src="video.icon" />
						<span v-html="video.label"></span>
					</a>
				</li>
			</ul>
			<div class="split">
				<span>尽请期待</span>
			</div>
			<ul class="vidio-list await">
				<li v-for="video in noVideos">
					<a class="waves-effect" @tap="noSupport('html/video_home.html',video)">
						<img :src="video.icon" />
						<span v-html="video.label"></span>
					</a>
				</li>
			</ul>
		</div>
		<script src="js/util.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/jQuery.js"></script>
		<script type="text/javascript" src="js/underscore.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/waves.js"></script>
		<script type="text/javascript">
			Waves.init();
			(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				mui.plusReady(function() {
					if(!getLoginUser()) {
						var wait = plus.nativeUI.showWaiting()
						plus.webview.create('html/login.html', 'login.html', {}, {});
						setTimeout(function() {
							wait.close();
						}, 150)
					}
					checkVersion();
					window.vm = new Vue({
						el: "#app",
						data: {
							logined: true,
							noVideos: [],
							videos: [
								/*{
																	label: "爱奇艺",
																	url: "http://m.iqiyi.com/",
																	img: "images/aiyiqi.jpg",
																	script: '$(".m-video-player").after("<div class=\'m-video-player\'></div>").remove();$(".m-video-player").click(function(){plus.webview.currentWebview().opener().evalJS("window.play()");})'
																}, {
																	label: "优酷视频",
																	url: "http://www.youku.com/",
																	img: "images/youku.jpg",
																	script: 'document.getElementById("player").innerHTML = "";document.getElementById("player").onclick = function(){plus.webview.currentWebview().opener().evalJS("window.play()");}'
																},
																{
																	label: "腾讯视频",
																	url: "http://m.v.qq.com/",
																	img: "images/tengxun.jpg",
																	script: '$(".site_player").html("");$(".site_player").click(function(){plus.webview.currentWebview().opener().evalJS("window.play()");})'
																},
																{
																	label: "搜狐视频",
																	url: "https://m.tv.sohu.com/film",
																	img: "images/souhu.jpg",
																	script: '$("#center_control").click(function(e){e.stopPropagation();plus.webview.currentWebview().opener().evalJS("window.play()");})'
																}
															*/
							]
						},
						methods: {

							init: function() {
								var that = this;
								postServer({
									url: requestUrl("/app/videoSupplier/list"),
									success: function(result) {
										if(result.success) {
											//											that.videos = result.result;
											that.videos = _.filter(result.result, function(v) {
												return v.support;
											})
											that.noVideos = _.filter(result.result, function(v) {
												return !v.support;
											})
										} else {
											mui.toast(result.msg)
										}
									}
								})
							},
							noSupport: function() {
								mui.toast("敬请期待!")
							},
							open: function(url, video) {
								mui.openWindow({
									id: url,
									url: url,
									_id: video.id,
									extras: video
								});
							},
							isAllopatry: function() {
								var that = this;
								setTimeout(function() {
									var user = getLoginUser();
									if(user) {
										postNowaitServer({
											url: requestUrl("/app/appUser/isAllopatry"),
											data: JSON.stringify({
												id: user.id,
												serial: getSrial()
											}),
											success: function(result) {
												if(!result.success) {
													logout();
													plus.nativeUI.alert(result.msg, function() {
														var wait = plus.nativeUI.showWaiting()
														plus.webview.create('html/login.html', 'login.html', {}, {});
														setTimeout(function() {
															wait.close();
														}, 150)
													})
												} else {

												}
											}
										})
										that.isAllopatry();

									}
								}, 1000 * 60)
							}
						}
					});
					vm.init();
					vm.isAllopatry();

					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#282824',
							radius: '50%'
						}
					}, {
						tag: 'font',
						id: 'icon',
						text: '\ue620', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/myiconfont.ttf',
							align: 'center',
							color: '#FFE21D',
							size: '30px'
						}
					}]);
					// append 到父webview中
					self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					//					drawNativeIcon.addEventListener('click', function(e) {
					//						mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
					//						// 重绘字体颜色
					//						if(active_color == '#fff') {
					//							drawNativeIcon.drawText('\ue600', {}, {
					//								fontSrc: '_www/fonts/iconfont.ttf',
					//								align: 'center',
					//								color: '#000',
					//								size: '30px'
					//							}, 'icon');
					//							active_color = '#000';
					//						} else {
					//							drawNativeIcon.drawText('\ue600', {}, {
					//								fontSrc: '_www/fonts/iconfont.ttf',
					//								align: 'center',
					//								color: '#fff',
					//								size: '30px'
					//							}, 'icon');
					//							active_color = '#fff';
					//						}
					//
					//					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);

					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;

					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						//						alert(subpages[currIndex - 1])
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}
						if(targetPage == activePage) {
							return;
						}

						//						if(currIndex !== 3) {
						//底部选项卡切换
						util.toggleNview(currIndex);
						// 子页面切换
						util.changeSubpage(targetPage, activePage, aniShow);
						//更新当前活跃的页面 
						activePage = targetPage;
						//						} else {
						//							//第四个tab 打开新窗口
						//							user = getLoginUser();
						//							if(!user) {
						//								plus.webview.open('html/login.html', 'new', {}, 'slide-in-right', 200);
						//							} else {
						//								targetPage = plus.webview.getWebviewById("html/personal.html")
						//								util.toggleNview(3);
						//								// 子页面切换
						//								util.changeSubpage(targetPage, activePage, aniShow);
						//								//更新当前活跃的页面 
						//								activePage = targetPage;
						//							}
						//						}
					});

					var slider = mui("#slider");
					slider.slider({
						interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
					});
				});
			})();
		</script>

	</body>

</html>